<template>
  <div class="my-income-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#ffffff"
              status-color="#ffffff"
              :fixed="true">
      <template slot="slot">
      </template>
    </snackbar>
    <div class="con-list">
      <div class="con_top_img">
        <div class="imgLeft">
          <img src="../../assets/image/zoomin@2x.png" alt="">
        </div>
        <div class="imgRight">
          <img src="../../assets/image/positionMore 6@2x.png" alt="">
        </div>
      </div>
      <div class="con-con">
        <img src="../../assets/image/positioning(4)@2x.png" alt="">
      </div>
      <div class="footer">
        <div class="footer_top">
          <div>碧桂园新楼盘</div>
          <div>范围：300m</div>
        </div>
        <div class="footer_con">
          <div class="footer_con_left">
            <img src="../../assets/image/img02.png" alt="">
            <div>广西省柳州市</div>
            <div>官塘工业园12</div>
          </div>
          <div class="footer_con_right">
            <dl>
              <dt><img src="../../assets/image/path@2x.png" alt=""></dt>
              <dd>导航</dd>
            </dl>
          </div>
        </div>
        <div class="footer_btm">
          <div>确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'satellitePositioning',
  data() {
    return {
      active: null
    }
  }
}
</script>

<style lang="scss" scoped>
.my-income-layout {
  width: 100%;

  .con-list {
    width: 100%;
    height: 100vh;
    background-image: url("../../assets/image/background01.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .con_top_img {
      display: flex;
      justify-content: space-between;
      margin: 0 4%;
      padding-top: 4%;

      .imgLeft {
        width: 14%;

        img {
          width: 100%;
        }
      }

      .imgRight {
        width: 26%;

        img {
          width: 100%;
        }
      }
    }

    .con-con {
      width: 50%;
      padding: 21.086% 0;
      position: absolute;
      top: 33.5%;
      right: 4%;
      border: #00A2FF 1px solid;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 12%;
      }
    }

    .footer {
      width: 92%;
      position: absolute;
      bottom: 3%;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 6%;
      font-size: 0.46rem;
      background-color: #FFFFFF;

      .footer_top {
        width: 100%;
        display: flex;
        margin: 6% 0;

        div:first-child {
          margin-left: 5%;
        }

        div:last-child {
          margin-left: 14%;
        }
      }

      .footer_con {
        width: 100%;
        display: flex;

        .footer_con_left {
          margin-left: 4%;
          width: 66%;
          float: left;

          img {
            width: 40%;
            float: left;
          }

          div {
            width: 56%;
            margin-left: 4%;
            margin-top: 4.5%;
            float: left;
          }
        }

        .footer_con_right {
          width: 24%;
          text-align: right;
          margin-right: 6%;

          img {
            width: 46%;
          }
        }
      }

      .footer_btm {
        width: 84%;
        text-align: right;
        border-top: #9B9B9B 1px solid;
        margin: 5% 0 4% 10%;

        div {
          margin-top: 2%;
        }
      }
    }
  }
}
</style>
